<template>
  <div style="padding: 40px">
    <!-- 编辑弹出窗口 -->
    <el-form
      v-show="showSearch"
      ref="queryAddForm"
      :model="purchaseEditForm"
      size="small"
      :inline="true"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="活动名称" prop="title">
            <el-input
              v-model="purchaseEditForm.title"
              placeholder="活动名称"
              clearable
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="8"> </el-col>
        <el-col :span="8"> </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="活动类型" prop="provinceId">
            <template #default>
              <div>
                {{ purchaseEditForm.provinceId == 0 ? "全国" : "区域" }}
              </div>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="活动地区" prop="provinceName">
            <template #default>
              <div>
                {{
                  purchaseEditForm.provinceName
                    ? purchaseEditForm.provinceName.replace(/,/g, " ")
                    : "全国"
                }}
              </div>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="活动时间" prop="created">
            <el-date-picker
              v-model="purchaseEditForm.created"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-form-item label="">
        <el-button
          type="warning"
          @click="addReallyReward(purchaseEditForm.activityId)"
          >添加实物奖品</el-button
        >
      </el-form-item> -->
    </el-form>
    <!-- 新增规则 -->
    <el-button @click="addActivityRules">新增规则</el-button>
    <!-- 规则表格 -->
    <el-table :data="ruleList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-button
            type="warning"
            v-if="scope.row.type == 2"
            @click="
              addReallyReward(
                purchaseEditForm.activityId,
                scope.row.ruleGroupId
              )
            "
            >添加实物奖品</el-button
          >
          <el-table
            :data="scope.row.rewardList"
            style="width: 100%"
            v-if="scope.row.type != 2"
          >
            <el-table-column prop="rewardId" label="奖品id" width="100">
            </el-table-column>
            <el-table-column prop="title" label="奖品名称" width="200">
            </el-table-column>
            <el-table-column prop="prob" label="奖品概率（千万份）" width="200">
            </el-table-column>
            <el-table-column prop="max" label="库存" width="200">
            </el-table-column>
          </el-table>
          <!-- type 2大奖 -->
          <div v-if="scope.row.type == 2">
            <div
              class="first-reward"
              v-for="item in rewardForm.rewardList"
              :key="item.rewardId"
            >
              <div class="reward-left">
                <div style="display: flex; width: 100%">
                  <p class="left-title">奖品名称</p>
                  <p class="left-title">奖品数量</p>
                  <p class="left-title" style="opacity: 0">库存</p>
                </div>
                <div class="reward-info">
                  <el-input
                    v-model="item.title"
                    placeholder="奖品名称"
                    clearable
                    class="input"
                    disabled
                  />
                  <el-input
                    v-model="item.bigRewardDemandJson.bigRewardCount"
                    placeholder="奖品数量"
                    clearable
                    class="input"
                    disabled
                  />
                  <el-input
                    style="opacity: 0"
                    v-model="item.max"
                    placeholder="库存"
                    clearable
                    class="input"
                  />
                </div>
                <div class="reward-right-number">
                  <p>抽奖次数</p>
                  <el-input
                    v-model="item.bigRewardDemandJson.smallDrawTime"
                    placeholder="奖品数量1"
                    clearable
                    class="number-input"
                    disabled
                    type="number"
                  />
                  ~<el-input
                    v-model="item.bigRewardDemandJson.bigDrawTime"
                    placeholder="奖品数量2"
                    clearable
                    class="number-input"
                    disabled
                    type="number"
                  />
                  <el-popconfirm
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    icon-color="#626AEF"
                    title="确定要暂停该活动规则吗？暂停该活动规则后，将取消该投放计划！"
                    @confirm="cancelBigReward(item.rewardId)"
                    @cancel="cancelPopconfirm"
                    v-if="item.status == 1"
                  >
                    <template #reference>
                      <el-button
                        type="danger"
                        style="margin-left: 20px"
                        v-if="
                          item.status == 1 &&
                          item.bigRewardDemandJson.beginTimestamp >
                            new Date().getTime()
                        "
                      >
                        取消</el-button
                      >
                    </template>
                  </el-popconfirm>
                </div>
                <div class="reward-right-time">
                  <p>投放时间</p>
                  <el-date-picker
                    style="margin-left: 20px"
                    :value="[
                      new Date(item.bigRewardDemandJson.beginTimestamp),
                      new Date(item.bigRewardDemandJson.endTimestamp),
                    ]"
                    disabled
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                  />
                </div>
              </div>
              <div class="reward-right">
                <p>参与条件</p>

                <div class="reward-right-time">
                  <p>投放地区:</p>
                  <p>{{ item.districtName }}</p>
                  <el-select
                    v-model="item.bigRewardDemandJson.provinceId"
                    placeholder="活动地区"
                    clearable
                    style="margin-left: 20px"
                    v-if="newRewardForm.length != 0"
                    multiple
                    disabled
                  >
                    <el-option
                      v-for="dict in countryList"
                      :key="dict.code"
                      :label="dict.name"
                      :value="dict.code"
                      disabled
                    />
                  </el-select>
                  <el-select
                    v-model="item.bigRewardDemandJson.cityId"
                    placeholder="活动地区"
                    clearable
                    style="margin-left: 20px"
                    v-if="newRewardForm.length != 0"
                    multiple
                    disabled
                  >
                    <el-option
                      v-for="dict in cityList"
                      :key="dict.code"
                      :label="dict.name"
                      :value="dict.code"
                      disabled
                    />
                  </el-select>
                  <el-select
                    v-model="item.bigRewardDemandJson.areaId"
                    placeholder="活动地区"
                    clearable
                    style="margin-left: 20px"
                    v-if="newRewardForm.length != 0"
                    multiple
                    disabled
                  >
                    <el-option
                      v-for="dict in countryList"
                      :key="dict.code"
                      :label="dict.name"
                      :value="dict.code"
                      disabled
                    />
                  </el-select>
                  <!-- <div v-else style="margin-left: 40px">全国</div> -->
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="groupName" label="规则名称" width="200">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.groupName"
            :disabled="scope.row.isAdd == false"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="top" label="规则明细" width="250">
        <template slot-scope="scope">
          <div v-if="scope.row.ruleJson">
             <p>城市:{{ scope.row.ruleJson.cityName }}</p>
            <p>区域:{{ scope.row.ruleJson.areaName  }}</p>
            <!--<p>
              起止时间:{{ scope.row.ruleJson.beginTimestamp }}-{{
                scope.row.ruleJson.endTimestamp
              }}
            </p> -->
            <p style="display: flex">
              抽奖次数:{{ scope.row.ruleJson.smallDrawRewardCount }}-{{
                scope.row.ruleJson.bigDrawRewardCount
              }}
              <el-select
                v-model="scope.row.ruleJson.selectCount"
                placeholder="选择抽奖次数"
                clearable
                v-if="scope.row.isAdd == true"
              >
                <el-option
                  v-for="dict in countList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </p>
          </div>
          <div v-else>暂无</div>
        </template>
      </el-table-column>
      <el-table-column prop="max" label="奖品" width="250">
        <template slot-scope="scope">
          <div v-for="item in scope.row.rewardList" :key="item.rewardId">
            {{ item.title }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="规则状态" width="250">
        <template slot-scope="scope">
          <div>
            {{
              scope.row.status == 1
                ? "正常"
                : scope.row.status == 0
                ? "暂停"
                : "取消"
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="strategy" label="规则类型" width="250">
        <template slot-scope="scope">
          <div v-if="scope.row.ruleJson">
            {{ scope.row.ruleJson.strategy?ruleTypeMap[scope.row.ruleJson.strategy]:'首次抽奖' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="220"
      >
        <template slot-scope="scope" v-if="scope.row.type == 1">
          <el-button
            v-if="scope.row.status != 0"
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleStop(scope.row, 0)"
            >暂停</el-button
          >
          <el-button
            v-if="scope.row.status != 1"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleStop(scope.row, 1)"
            >启动</el-button
          >
          <el-button
            v-if="scope.row.status != -1"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleStop(scope.row, -1)"
            >取消</el-button
          >
          <el-button
            v-if="scope.row.isAdd == false"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDetail(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增大奖弹窗 -->
    <el-dialog
      v-model="rewardFormshow"
      :title="rewardTitle"
      width="1200px"
      append-to-body
      :visible.sync="open"
      @close="cancelSetting"
    >
      <!-- 新增大奖 -->
      <div>
        <div
          class="first-reward"
          v-for="item in newRewardForm"
          :key="item.activityId + item.title + item.bigRewardCount"
        >
          <div class="reward-left">
            <div style="display: flex; width: 100%">
              <!-- <p class="left-title">奖品层级</p> -->
              <p class="left-title">奖品名称</p>
              <p class="left-title">奖品数量</p>
              <p class="left-title" style="opacity: 0">库存</p>
            </div>
            <div class="reward-info">
              <!-- <p>一等奖</p> -->
              <el-input
                v-model="item.title"
                placeholder="奖品名称"
                clearable
                class="input"
                @change="changeTitle"
                autofocus
                disabled
              />
              <el-input-number
                v-model="item.bigRewardCount"
                placeholder="奖品数量"
                clearable
                class="input"
                type="number"
                :min="1"
              />
              <el-input
                style="opacity: 0"
                v-model="item.max"
                placeholder="库存"
                clearable
                class="input"
              />
            </div>
            <div class="reward-right-number">
              <p>抽奖次数</p>
              <el-input-number
                style="margin-left: 90px"
                v-model="item.smallDrawTime"
                placeholder="最小抽奖次数"
                clearable
                class="number-input"
                type="number"
                :min="1"
                @change="changeSmall"
              />
              ~<el-input-number
                v-model="item.bigDrawTime"
                placeholder="最大抽奖次数"
                clearable
                :min="2"
                class="number-input"
                type="number"
                @change="changeBig"
              />
            </div>
            <div class="reward-right-time">
              <p>投放时间</p>
              <el-date-picker
                style="margin-left: 60px"
                v-model="item.createdTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </div>
          </div>
          <div class="reward-right">
            <p>参与条件</p>

            <div class="reward-right-time">
              <p>投放地区(省)</p>
              <el-select
                v-model="item.provinceId"
                placeholder="活动地区"
                clearable
                multiple
                style="margin-left: 20px"
                @change="changeProvince"
                @remove-tag="removeProvice"
                @clear="clearProvice"
                filterable
                :disabled="item.provinceId.length != 0"
              >
                <el-option
                  v-for="dict in countryList"
                  :key="dict.code"
                  :label="dict.name"
                  :value="dict.code"
                />
              </el-select>
            </div>
            <div class="reward-right-time">
              <p>投放地区(市)</p>
              <el-select
                v-model="item.cityId"
                placeholder="活动地区"
                clearable
                multiple
                filterable
                style="margin-left: 20px"
                @change="changeCity"
                @remove-tag="removeCity"
                @clear="clearCity"
              >
                <el-option
                  v-for="dict in cityList"
                  :key="dict.code"
                  :label="dict.name"
                  :value="dict.code"
                />
              </el-select>
            </div>
            <div class="reward-right-time">
              <p>投放地区(区)</p>
              <el-select
                v-model="item.areaId"
                placeholder="活动地区"
                clearable
                filterable
                multiple
                style="margin-left: 20px"
              >
                <el-option
                  v-for="dict in areaList"
                  :key="dict.code"
                  :label="dict.name"
                  :value="dict.code"
                />
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog-footer" slot="footer" style="margin-top: 40px">
        <el-button @click="cancelSetting">返回</el-button>
        <el-button type="primary" @click="confirmSetting"
          >保存大奖设置</el-button
        >
      </div>
    </el-dialog>

    <!-- 编辑活动规则详情弹窗 -->
    <el-dialog
      v-model="editActivityshow"
      :title="editActivityTitle"
      width="1200px"
      append-to-body
      :visible.sync="openEditActivity"
      @close="cancelEditActivitySetting"
    >
      <!-- 编辑的活动表格详情 -->

      <el-form
        :model="activityObj"
        label-width="auto"
        style="max-width: 1100px"
      >
        <el-form-item label="规则名称">
          <el-input v-model="activityObj.groupName" disabled />
        </el-form-item>
        <!-- <el-form-item label="规则类型">
          <el-input v-model="activityObj.type" disabled />
        </el-form-item> -->
        <el-form-item label="规则抽奖最小次数" v-if="activityObj.ruleJson&&activityObj.ruleJson.strategy!='RewardRuleTimesHitStrategy'">
          <el-input
            v-model="activityObj.ruleJson.smallDrawRewardCount"
            disabled
          />
        </el-form-item>
        <el-form-item label="规则抽奖最大次数" v-if="activityObj.ruleJson&&activityObj.ruleJson.strategy!='RewardRuleTimesHitStrategy'">
          <el-input
            v-model="activityObj.ruleJson.bigDrawRewardCount"
            disabled
          />
        </el-form-item>
        <!-- n次必中 -->
        <el-form-item label="规则抽奖城市" v-if="activityObj.ruleJson&&activityObj.ruleJson.strategy=='RewardRuleTimesHitStrategy'">
          <el-input
            v-model="activityObj.ruleJson.cityName"
            disabled
          />
        </el-form-item>
        <el-form-item label="规则抽奖地区" v-if="activityObj.ruleJson&&activityObj.ruleJson.strategy=='RewardRuleTimesHitStrategy'">
          <el-input
            v-model="activityObj.ruleJson.areaName"
            disabled
          />
        </el-form-item>
      </el-form>

      <!-- 规则表格 -->

      <el-table :data="activityObj.rewardList" style="width: 100%">
        <el-table-column prop="rewardId" label="奖品id" width="120">
        </el-table-column>
        <el-table-column prop="title" label="奖品名称" width="260">
        </el-table-column>

        <el-table-column prop="num" label="奖品数量" width="200">
        </el-table-column>
        <el-table-column prop="prob" label="概率(千万)" width="340">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.prob"
              placeholder="概率"
              clearable
              :min="0"
              :max="10000000"
              :disabled="activityObj.type == 0"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="max" label="库存" width="300"> </el-table-column>
      </el-table>

      <div class="dialog-footer" slot="footer" style="margin-top: 40px">
        <el-button @click="cancelEditActivitySetting">返回</el-button>
        <el-button type="primary" @click="confirmEditActivitySetting"
          >保存活动规则</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改规则状态弹窗 -->
    <el-dialog
      v-model="editRuleshow"
      title="修改规则状态"
      width="600px"
      append-to-body
      :visible.sync="editRuleopen"
      @close="cancelRuleSetting"
    >
      <div>
        当前规则状态：{{
          ruleRowStatus2 == 1 ? "启动" : ruleRowStatus2 == 0 ? "暂停" : "取消"
        }}
      </div>
      <p></p>
      <div style="display: flex; align-items: center">
        确认修改当前规则状态吗
      </div>
      <div class="dialog-footer" slot="footer" style="margin-top: 40px">
        <el-button @click="cancelRuleSetting">返回</el-button>
        <el-button type="primary" @click="confirmRuleStatus">确认</el-button>
      </div>
    </el-dialog>
    <!-- 活动下 新增规则弹窗 -->

    <el-dialog
      v-model="addRuleShow"
      title="新增规则"
      width="1000px"
      append-to-body
      :visible.sync="addRuleOpen"
      @close="cancelAddRule"
    >
      <div>
        <el-select
          v-model="ruleType"
          placeholder="规则类型"
          clearable
          style="margin-left: 20px"
          @change="changeRuleType"
        >
          <el-option
            v-for="dict in ruleTypeDict"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </div>
      <el-table :data="addRuleList" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table
              :data="scope.row.rewardList"
              style="width: 100%"
              v-if="scope.row.type != 2"
            >
              <el-table-column prop="rewardId" label="奖品id" width="100">
              </el-table-column>
              <el-table-column prop="title" label="奖品名称" width="200">
              </el-table-column>
              <el-table-column
                prop="prob"
                label="奖品概率（千万份）"
                width="200"
              >
              </el-table-column>
              <el-table-column prop="max" label="库存" width="200">
              </el-table-column>
            </el-table>
            <!-- type 2大奖 -->
            <div v-if="scope.row.type == 2">
              <div
                class="first-reward"
                v-for="item in rewardForm.rewardList"
                :key="item.rewardId"
              >
                <div class="reward-left">
                  <div style="display: flex; width: 100%">
                    <p class="left-title">奖品名称</p>
                    <p class="left-title">奖品数量</p>
                    <p class="left-title" style="opacity: 0">库存</p>
                  </div>
                  <div class="reward-info">
                    <el-input
                      v-model="item.title"
                      placeholder="奖品名称"
                      clearable
                      class="input"
                      disabled
                    />
                    <el-input
                      v-model="item.bigRewardDemandJson.bigRewardCount"
                      placeholder="奖品数量"
                      clearable
                      class="input"
                      disabled
                    />
                    <el-input
                      style="opacity: 0"
                      v-model="item.max"
                      placeholder="库存"
                      clearable
                      class="input"
                    />
                  </div>
                </div>
                <div class="reward-right">
                  <p>参与条件</p>
                  <div class="reward-right-number">
                    <p>抽奖次数</p>
                    <el-input
                      v-model="item.bigRewardDemandJson.smallDrawTime"
                      placeholder="奖品数量1"
                      clearable
                      class="number-input"
                      disabled
                      type="number"
                    />
                    ~<el-input
                      v-model="item.bigRewardDemandJson.bigDrawTime"
                      placeholder="奖品数量2"
                      clearable
                      class="number-input"
                      disabled
                      type="number"
                    />
                    <el-popconfirm
                      confirm-button-text="确认"
                      cancel-button-text="取消"
                      icon-color="#626AEF"
                      title="确定要暂停该活动规则吗？暂停该活动规则后，将取消该投放计划！"
                      @confirm="cancelBigReward(item.rewardId)"
                      @cancel="cancelPopconfirm"
                      v-if="item.status == 1"
                    >
                      <template #reference>
                        <el-button
                          type="danger"
                          style="margin-left: 20px"
                          v-if="
                            item.status == 1 &&
                            item.bigRewardDemandJson.beginTimestamp >
                              new Date().getTime()
                          "
                        >
                          取消</el-button
                        >
                      </template>
                    </el-popconfirm>
                  </div>
                  <div class="reward-right-time">
                    <p>投放时间</p>
                    <el-date-picker
                      style="margin-left: 20px"
                      :value="[
                        new Date(item.bigRewardDemandJson.beginTimestamp),
                        new Date(item.bigRewardDemandJson.endTimestamp),
                      ]"
                      disabled
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"
                    />
                  </div>
                  <div class="reward-right-time">
                    <p>投放地区</p>
                    <p>{{ item.districtName }}</p>
                    <el-select
                      v-model="item.bigRewardDemandJson.provinceId"
                      placeholder="活动地区"
                      clearable
                      style="margin-left: 20px"
                      v-if="newRewardForm.length != 0"
                      multiple
                      disabled
                    >
                      <el-option
                        v-for="dict in countryList"
                        :key="dict.code"
                        :label="dict.name"
                        :value="dict.code"
                        disabled
                      />
                    </el-select>
                    <el-select
                      v-model="item.bigRewardDemandJson.cityId"
                      placeholder="活动地区"
                      clearable
                      style="margin-left: 20px"
                      v-if="newRewardForm.length != 0"
                      multiple
                      disabled
                    >
                      <el-option
                        v-for="dict in cityList"
                        :key="dict.code"
                        :label="dict.name"
                        :value="dict.code"
                        disabled
                      />
                    </el-select>
                    <el-select
                      v-model="item.bigRewardDemandJson.areaId"
                      placeholder="活动地区"
                      clearable
                      style="margin-left: 20px"
                      v-if="newRewardForm.length != 0"
                      multiple
                      disabled
                    >
                      <el-option
                        v-for="dict in countryList"
                        :key="dict.code"
                        :label="dict.name"
                        :value="dict.code"
                        disabled
                      />
                    </el-select>
                    <!-- <div v-else style="margin-left: 40px">全国</div> -->
                  </div>
                </div>
              </div>
            </div>

            <el-button
              type="warning"
              v-if="scope.row.type == 2"
              @click="
                addReallyReward(
                  purchaseEditForm.activityId,
                  scope.row.ruleGroupId
                )
              "
              >添加实物奖品</el-button
            >
          </template>
        </el-table-column>

        <el-table-column
          label="城市"
          width="250"
          v-if="ruleType == 'RewardRuleTimesHitStrategy'"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.ruleJson.cityId"
              placeholder="活动城市"
              @change="changeRuleCity"
              clearable
              filterable
              multiple
              style="margin-left: 20px"
            >
              <el-option
                v-for="dict in cityList"
                :key="dict.code"
                :label="dict.name"
                :value="dict.code"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="地区"
          width="250"
          v-if="ruleType == 'RewardRuleTimesHitStrategy'"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.ruleJson.areaId"
              placeholder="活动地区"
              clearable
              filterable
              multiple
              style="margin-left: 20px"
            >
              <el-option
                v-for="dict in areaList"
                :key="dict.code"
                :label="dict.name"
                :value="dict.code"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="抽奖次数"
          width="250"
          v-if="ruleType == 'RewardRuleTimesHitStrategy'"
        >
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.ruleJson.thresholdCount"
              :disabled="scope.row.isAdd == false"
              :min="1" 
            ></el-input-number>
          </template>
        </el-table-column>

        <el-table-column
          prop="groupName"
          label="规则名称"
          width="200"
          v-if="ruleType == 'RewardRuleFirstDrawStrategy'"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.groupName"
              :disabled="scope.row.isAdd == false"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="top"
          label="规则明细"
          width="250"
          v-if="ruleType == 'RewardRuleFirstDrawStrategy'"
        >
          <template
            slot-scope="scope"
            v-if="ruleType == 'RewardRuleFirstDrawStrategy'"
          >
            <div v-if="scope.row.ruleJson">
              <!-- <p>城市id:{{ scope.row.ruleJson.cityId }}</p>
              <p>区域id:{{ scope.row.ruleJson.areaId }}</p>
              <p>
                起止时间:{{ scope.row.ruleJson.beginTimestamp }}-{{
                  scope.row.ruleJson.endTimestamp
                }}
              </p> -->
              <p style="display: flex">
                抽奖次数:{{ scope.row.ruleJson.smallDrawRewardCount }}-{{
                  scope.row.ruleJson.bigDrawRewardCount
                }}
                <el-select
                  v-model="scope.row.ruleJson.selectCount"
                  placeholder="选择抽奖次数"
                  clearable
                  v-if="scope.row.isAdd == true"
                >
                  <el-option
                    v-for="dict in countList"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </p>
            </div>
            <div v-else>暂无</div>
          </template>
        </el-table-column>

        <el-table-column prop="max" label="奖品" width="250">
          <template slot-scope="scope">
            <div v-for="item in scope.row.rewardList" :key="item.rewardId">
              {{ item.title }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="status" label="规则状态" width="250">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.status == 1
                  ? "正常"
                  : scope.row.status == 0
                  ? "暂停"
                  : "取消"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="规则类型" width="250">
        </el-table-column> -->
      </el-table>
      <el-button type="primary" @click="confirmAddRules"
        >保存新增规则</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import china from "../../assets/json/china.json";
import {
  getActivityRewardById,
  addOrUpdateBigReward,
  updateDayMaxRewardCount,
  cancelBigRewards,
  generateBigRewards,
  getAddressList,
  updateRuleGroup,
  getRewardRuleDrawTime,
  addActivityRewardRule,
} from "@/api/lottery/index";
import { getRewardLists } from "@/api/record/index";

export default {
  name: "addReward",
  data() {
    return {
      // 弹出层
      open: false,
      // 大奖弹窗
      rewardFormshow: false,
      // 大奖弹窗标题
      rewardTitle: "",
      // 编辑活动弹窗
      editActivityshow: false,
      // 编辑活动弹窗标题
      editActivityTitle: "",
      openEditActivity: false,
      // 修改规则状态
      editRuleopen: false,
      editRuleshow: false,
      addRuleList: [],
      // 需要修改的规则状态
      needRuleStatus: 0,
      // 活动下新增规则show
      addRuleShow: false,
      addRuleOpen: false,
      // 规则类型字典
      ruleTypeDict: [
        {
          label: "首次抽奖",
          value: "RewardRuleFirstDrawStrategy",
        },
        {
          label: "N次必中",
          value: "RewardRuleTimesHitStrategy",
        },
      ],
      ruleTypeMap: {
        RewardRuleFirstDrawStrategy: "首次抽奖",
        RewardRuleTimesHitStrategy: "N次必中",
      },
      // 规则字典选中
      ruleType: "RewardRuleFirstDrawStrategy",
      // 规则状态
      ruleStatus: [
        {
          label: "暂停",
          value: 0,
        },
        {
          label: "启动",
          value: 1,
        },
        {
          label: "取消规则",
          value: -1,
        },
      ],
      ruleRowStatus: "",
      ruleRowStatus2: "",
      ruleRowGroupId: "",
      // 当前编辑的活动对象
      activityObj: {},
      // 显示搜索条件
      showSearch: true,
      // 编辑弹窗表格
      purchaseEditForm: {},
      // 奖品列表
      rewardList: [],
      // 次数列表
      countList: [],
      // 规则列表
      ruleList: [],
      // 规则长度
      ruleLength: 0,
      tableData: [],
      // 大奖表单
      rewardForm: [],
      // 表单查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        activetyName: "",
        isScan: "",
        address: "",
        time: "",
        reward: "",
        isLimit: "",
        status: "",
      },
      // 城市列表
      countryList: [],
      // 市列表
      cityList: [],
      //区列表
      areaList: [],
      //   上限
      dayMaxRewardCount: "",
      //   新增的大奖 一条
      newRewardForm: [],
      // 奖品列表
      rewardLists: [],
      // 当前活动id
      nowActivityId: "",
    };
  },
  created() {
    this.getActivityDetailById();
    this.getProvinceCityArea({
      parentId: "",
    });
    this.getRewardRuleCount();
    this.getAllRewardList();
  },
  methods: {
    // 获取奖品列表
    getAllRewardList() {
      getRewardLists().then((res) => {
        if (res.code == 0) {
          this.rewardLists = res.data.map((it) => {
            return {
              label: it.title,
              value: it.hnRewardId,
              type: it.type,
            };
          });
        }
      });
    },
    // 获取全国省
    getProvinceCityArea(params) {
      getAddressList(params).then((res) => {
        if (res.code == 0) {
          this.countryList = res.data.map((it) => {
            return {
              code: it.districtId,
              name: it.name,
            };
          });
        }
      });
    },
    // 获取provinceId下面的市
    getCity(params) {
      getAddressList(params).then((res) => {
        if (res.code == 0) {
          this.cityList = this.cityList.concat(
            res.data.map((it) => {
              return {
                code: it.districtId,
                name: it.name,
                parentId: it.parentId,
              };
            })
          );
        }
      });
    },
    // 获取cityId下面的区
    getArea(params) {
      getAddressList(params).then((res) => {
        if (res.code == 0) {
          this.areaList = this.areaList.concat(
            res.data.map((it) => {
              return {
                code: it.districtId,
                name: it.name,
                parentId: it.parentId,
              };
            })
          );
        }
      });
    },
    // 选取省 获取下面的市
    changeProvince(e) {
      let newId = [];
      if (this.cityList.length == 0) {
        this.newRewardForm[0].provinceId.forEach((it) => {
          this.getCity({
            parentId: it,
          });
        });
        return;
      }
      let parentIds = this.cityList.map((it) => {
        return it.parentId;
      });
      // 遍历this.newRewardForm[0].provinceId 如果parentIds中没有这个值 说明是新增的
      let newProvince = this.newRewardForm[0].provinceId.filter((it) => {
        return parentIds.indexOf(it) == -1;
      });
      // 取消的省
      let delProvince = parentIds.filter((it) => {
        return this.newRewardForm[0].provinceId.indexOf(it) == -1;
      });
      // console.log(delProvince, "delProvince");
      this.removeProvice(delProvince[0]);
      // 然后新增市
      newProvince.forEach((its) => {
        this.getCity({
          parentId: its,
        });
      });
    },
    removeProvice(e) {
      this.cityList = this.cityList.filter((it) => it.parentId != e);
      this.areaList = this.areaList.filter(
        (it) => it.code.toString().slice(0, 2) != e
      );
      // 同时 this.cityId里面删除parentId==e的项
      this.newRewardForm[0].cityId.forEach((it, index) => {
        if (it.toString().slice(0, 2) == e) {
          this.newRewardForm[0].cityId.splice(index, 1);
        }
      });
      // areaId都去除
      this.newRewardForm[0].areaId.forEach((it, index) => {
        if (it.toString().slice(0, 2) == e) {
          this.newRewardForm[0].areaId.splice(index, 1);
        }
      });
    },
    clearProvice() {
      // 全部清空省
      this.newRewardForm[0].provinceId = [];
      this.newRewardForm[0].cityId = [];
      this.newRewardForm[0].areaId = [];
      this.cityList = [];
      this.areaList = [];
    },
    // 选取市 获取下面的区
    changeCity(e) {
      let newId = [];
      if (this.areaList.length == 0) {
        this.newRewardForm[0].cityId.forEach((it) => {
          this.getArea({
            parentId: it,
          });
        });
        return;
      }
      let parentIds = this.areaList.map((it) => {
        return it.parentId;
      });
      // 遍历this.newRewardForm[0].cityId 如果parentIds中没有这个值 说明是新增的
      let newCity = this.newRewardForm[0].cityId.filter((it) => {
        return parentIds.indexOf(it) == -1;
      });
      // 取消的区
      let delCity = parentIds.filter((it) => {
        return this.newRewardForm[0].cityId.indexOf(it) == -1;
      });
      // console.log(delCity, "delCity");
      this.removeCity(delCity[0]);
      // 然后新增区
      newCity.forEach((its) => {
        this.getArea({
          parentId: its,
        });
      });
    },
    removeCity(e) {
      this.areaList = this.areaList.filter((it) => it.parentId != e);
      // 同时 this.areaId里面删除parentId==e的项
      let newAreaId = [];
      this.newRewardForm[0].areaId.forEach((it, index) => {
        if (it.toString().slice(0, 4) == e) {
        } else {
          newAreaId.push(it);
        }
      });
      this.newRewardForm[0].areaId = newAreaId;
    },
    clearCity() {
      // 全部清空市
      this.cityList = [];
      this.areaList = [];
      this.newRewardForm[0].cityId = [];
      this.newRewardForm[0].areaId = [];
    },
    // 获取抽奖次数列表
    getRewardRuleCount() {
      getRewardRuleDrawTime().then((res) => {
        if (res.code == 0) {
          this.countList = res.data.map((it) => {
            return {
              value: it,
              label: it.replace("_", ","),
            };
          });
        }
      });
    },
    // 查询奖品详情
    getActivityDetailById() {
      this.nowActivityId = this.$route.query.id;
      let id = this.$route.query.id;
      getActivityRewardById({
        activityId: id,
      }).then((res) => {
        if (res.code == 0) {
          // this.$message.success("查询成功");
          this.ruleEditShow = true;
          this.open1 = true;
          this.title = "编辑活动规则";
          // this.dayMaxRewardCount = res.data.dayMaxRewardCount;
          res.data.created = [
            new Date(res.data.startTime ?? new Date("2024-03-11").getTime()),
            new Date(res.data.endTime),
          ];
          // 大奖表格数据
          this.rewardForm = res.data.rewardRuleGroupVoList.find((it) => {
            return it.type == 2;
          });

          // this.rewardForm.forEach((it) => {
          //   if (it.bigRewardDemandJson.provinceId) {
          //     it.bigRewardDemandJson.provinceId =
          //       it.bigRewardDemandJson.provinceId.split(",");
          //   }
          //   it.bigRewardDemandJson.provinceId.forEach((its) => {
          //     its = Number(its);
          //   });
          // });
          // console.log(this.rewardForm, "this.rewardForm");
          // 新增的大奖
          // 小奖
          // res.data.rewardList = res.data.rewardList.filter((it) => {
          //   return it.status != 1;
          // });
          this.purchaseEditForm = res.data;
          // 规则列表
          this.ruleList = res.data.rewardRuleGroupVoList;
          this.ruleList.forEach((it) => {
            it.isAdd = false;
          });
          this.ruleLength = this.ruleList.length;
        }
      });
    },
    // 保存大奖
    confirmSetting() {
      if (this.newRewardForm.length == 0) {
        this.$message.error("请先新增大奖");
        return;
      }
      if (this.newRewardForm[0].title == "") {
        this.$message.error("请输入奖品名称");
        return;
      }
      if (
        this.newRewardForm[0].bigRewardCount == "" ||
        this.newRewardForm[0].bigRewardCount < 0 ||
        this.newRewardForm[0].bigRewardCount == 0
      ) {
        this.$message.error("请输入正确奖品数量");
        return;
      }
      if (
        this.newRewardForm[0].smallDrawTime == "" ||
        this.newRewardForm[0].smallDrawTime < 0 ||
        this.newRewardForm[0].smallDrawTime == 0
      ) {
        this.$message.error("请输入小奖个数");
        return;
      }
      if (
        this.newRewardForm[0].bigRewardCount == "" ||
        this.newRewardForm[0].bigRewardCount < 0 ||
        this.newRewardForm[0].bigRewardCount == 0
      ) {
        this.$message.error("请输入大奖个数");
        return;
      }
      if (this.newRewardForm[0].smallDrawTime == "") {
        this.$message.error("请输入领取最小次数");
        return;
      }
      if (this.newRewardForm[0].bigDrawTime == "") {
        this.$message.error("请输入领取最大次数");
        return;
      }
      if (
        this.newRewardForm[0].smallDrawTime > this.newRewardForm[0].bigDrawTime
      ) {
        this.$message.error("领取最小次数不能大于领取最大次数");
        return;
      }
      if (
        this.newRewardForm[0].smallDrawTime == this.newRewardForm[0].bigDrawTime
      ) {
        this.$message.error("领取最小次数不能等于领取最大次数");
        return;
      }
      if (this.newRewardForm[0].createdTime == "") {
        this.$message.error("请输入活动时间");
        return;
      }
      if (this.newRewardForm[0].createdTime.length != 2) {
        this.$message.error("请选择活动时间");
        return;
      }
      if (
        this.newRewardForm[0].createdTime[0] >
        this.newRewardForm[0].createdTime[1]
      ) {
        this.$message.error("开始时间不能大于结束时间");
        return;
      }
      if (this.newRewardForm[0].createdTime[0] < new Date()) {
        this.$message.error("开始时间不能小于当前时间");
        return;
      }
      if (this.newRewardForm[0].createdTime[1] < new Date()) {
        this.$message.error("结束时间不能小于当前时间");
        return;
      }
      if (
        this.newRewardForm[0].createdTime[0] ==
        this.newRewardForm[0].createdTime[1]
      ) {
        this.$message.error("开始时间不能等于结束时间");
        return;
      }

      let params = {
        activityId: this.nowActivityId,
        title: this.newRewardForm[0].title,
        beginTimestamp: new Date(
          this.newRewardForm[0].createdTime[0]
        ).getTime(),
        endTimestamp: new Date(this.newRewardForm[0].createdTime[1]).getTime(),
        smallDrawTime: this.newRewardForm[0].smallDrawTime,
        bigDrawTime: this.newRewardForm[0].bigDrawTime,
        provinceId: this.newRewardForm[0].provinceId.join(","),
        cityId: this.newRewardForm[0].cityId.join(","),
        areaId: this.newRewardForm[0].areaId.join(","),
        bigRewardCount: Number(this.newRewardForm[0].bigRewardCount),
        ruleGroupId: this.newRewardForm[0].ruleGroupId,
      };
      //   统计rewardForm bigRewardDemandJson.bigRewardCount和newRewardForm[0]里面的bigRewardCount 加起来不能超过100
      let oldCount = 0;
      if (this.rewardForm.length > 0) {
        this.rewardForm.forEach((element) => {
          oldCount += element.bigRewardDemandJson.bigRewardCount;
        });
      } else {
      }

      let newCount = params.bigRewardCount;
      // console.log(oldCount, newCount);
      if (oldCount + newCount > 100) {
        this.$message.error("大奖设置不能超过100");
        setTimeout(() => {
          // 提示当前剩余的大奖数量
          this.$message.error(
            `当前剩余的大奖数量为${100 - (oldCount + newCount)}`
          );
        });
        return;
      }
      addOrUpdateBigReward(params).then((res) => {
        if (res.code == 0) {
          this.$message.success("新增大奖保存设置成功");
          this.getActivityDetailById();
          this.newRewardForm = [];
          this.rewardFormshow = false;
          this.open = false;
          // this.postBigReward(res.data);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    cancelSetting() {
      this.rewardFormshow = false;
      this.newRewardForm = [];
      this.open = false;
    },
    // 投放时间
    changeCreatedTime(e) {
      this.newRewardForm[0].createdTime = e;
    },
    // 投放大奖
    postBigReward(data) {
      generateBigRewards({ rewardId: data.rewardId }).then((res) => {
        if (res.code == 0) {
          this.$message.success("投放成功");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 保存上限
    confirmLimit() {
      // if (
      //   this.dayMaxRewardCount == "" ||
      //   this.dayMaxRewardCount == null ||
      //   this.dayMaxRewardCount == 0 ||
      //   this.dayMaxRewardCount < 0
      // ) {
      //   this.$message.error("请输入单日抽奖次数上限");
      //   return;
      // }
      let params = {
        activityId: this.$route.query.id,
        dayMaxRewardCount: this.dayMaxRewardCount,
      };
      updateDayMaxRewardCount(params).then((res) => {
        if (res.code == 0) {
          this.$message.success("保存成功");
          this.getActivityDetailById();
        } else {
          this.$message.error("请稍后重试");
        }
      });
    },
    // 取消大奖
    cancelBigReward(id) {
      cancelBigRewards({
        rewardId: id,
      }).then((res) => {
        if (res.code == 0) {
          this.$message.success("取消成功");
          this.getActivityDetailById();
        } else {
          this.$message.error("请稍后重试");
        }
      });
    },
    // 增加实物大奖
    addReallyReward(activityId, ruleGroupId) {
      if (this.newRewardForm.length != 0) {
        this.$message.error("大奖本次只能新增一条，已清空");
        this.newRewardForm = [];
        return;
      }
      let bigReward = this.rewardLists.find((it) => it.type == 1);

      this.newRewardForm.push({
        activityId: activityId,
        title: bigReward.label,
        hnRewardId: bigReward.value,
        createdTime: [],
        smallDrawTime: "",
        bigDrawTime: "",
        provinceId:
          this.purchaseEditForm.provinceId == 0
            ? ""
            : this.purchaseEditForm.provinceId
                .split(",")
                .map((it) => Number(it)),
        cityId: "",
        areaId: "",
        bigRewardCount: "",
        ruleGroupId: ruleGroupId,
      });
      this.rewardFormshow = true;
      this.open = true;
      this.rewardTitle = "新增大奖";
      if (this.purchaseEditForm.provinceId != 0) {
        this.changeProvince();
      }
    },
    //
    changeSmall(e) {
      this.newRewardForm[0].smallDrawTime = e;
    },
    changeBig(e) {
      this.newRewardForm[0].bigDrawTime = e;
    },
    changeTitle(e) {
      this.newRewardForm[0].title = e;
    },
    cancelPopconfirm() {},
    // 修改规则状态
    handleStop(row, status) {
      this.needRuleStatus = status;
      this.editRuleshow = true;
      this.editRuleopen = true;
      this.ruleRowStatus = row.status;
      this.ruleRowStatus2 = row.status;
      this.ruleRowGroupId = row.ruleGroupId;
    },
    cancelRuleSetting() {
      this.editRuleshow = false;
      this.editRuleopen = false;
    },
    confirmRuleStatus() {
      // console.log(this.ruleRowGroupId, this.needRuleStatus,'needRuleStatus');
      let params = {
        ruleGroupId: this.ruleRowGroupId,
        status: this.needRuleStatus,
      };
      updateRuleGroup(params).then((res) => {
        if (res.code == 0) {
          this.$message.success("修改规则状态成功");
          this.getActivityDetailById();
          this.cancelRuleSetting();
        }
      });
    },
    // 编辑的详情
    handleDetail(row) {
      this.editActivityshow = true;
      this.openEditActivity = true;
      this.activityObj = row;
      this.editActivityTitle = "编辑活动";
    },
    confirmEditActivitySetting() {
      console.log(this.activityObj);
      let countProb = 0;
      // 累计概率 this.activityObj 循环累加 不得大于10000000
      if (this.activityObj.rewardList.length > 0) {
        this.activityObj.rewardList.forEach((element) => {
          countProb += Number(element.prob);
        });
      } else {
        countProb = 0;
      }
      if (countProb > 10000000) {
        this.$message.error("累计概率不能大于10000000");
        return;
      }
      updateRuleGroup(this.activityObj)
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("保存成功");
            this.editActivityshow = false;
            this.editActivityTitle = "";
            this.openEditActivity = false;
            this.getActivityDetailById();
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    cancelEditActivitySetting() {
      this.editActivityshow = false;
      this.openEditActivity = false;
      this.editActivityTitle = "";
    },
    // 新增规则详情
    addActivityRules() {
      // if (this.ruleLength < this.ruleList.length) {
      //   // 只能新增一个
      //   this.$message.warning("单次只能新增一个规则");
      //   return;
      // }
      this.addRuleOpen = true;
      this.addRuleShow = true;
      this.addRuleList = [
        {
          groupName: "",
          type: 1,
          isAdd: true,
          ruleJson: {
            smallDrawRewardCount: "",
            bigDrawRewardCount: "",
            selectCount: "",
          },
          selectRewarded: "",
          rewardList: [
            {
              hnRewardId: "1",
              type: 0,
              title: "谢谢参与",
              num: 0,
              prob: 7500004,
              max: 0,
            },
            {
              hnRewardId: "2",
              type: 2,
              title: "29元红包",
              num: 2900,
              prob: 4145,
              max: 300000,
            },
            {
              hnRewardId: "3",
              type: 2,
              title: "2.9元红包",
              num: 290,
              prob: 276395,
              max: 20000000,
            },
            {
              hnRewardId: "4",
              type: 2,
              title: "0.5元红包",
              num: 50,
              prob: 2219456,
              max: 160599900,
            },
          ],
        },
      ];
    },
    // 新增规则 修改类型
    changeRuleType(e) {
      // this.ruleType = e
      this.addRuleList = [
        {
          groupName: "",
          type: 1,
          isAdd: true,
          ruleJson: {
            smallDrawRewardCount: "1",
            bigDrawRewardCount: "",
            selectCount: "",
            strategy: "",
            cityId: "city",
            areaId: "area",
            thresholdCount: "",
          },

          selectRewarded: "",
          rewardList: [
            {
              hnRewardId: "1",
              type: 0,
              title: "谢谢参与",
              num: 0,
              prob: 7500004,
              max: 0,
            },
            {
              hnRewardId: "2",
              type: 2,
              title: "29元红包",
              num: 2900,
              prob: 4145,
              max: 300000,
            },
            {
              hnRewardId: "3",
              type: 2,
              title: "2.9元红包",
              num: 290,
              prob: 276395,
              max: 20000000,
            },
            {
              hnRewardId: "4",
              type: 2,
              title: "0.5元红包",
              num: 50,
              prob: 2219456,
              max: 160599900,
            },
          ],
        },
      ];
      if (e == "RewardRuleTimesHitStrategy") {
        let provinceIds = this.purchaseEditForm.provinceId
          .split(",")
          .map((it) => Number(it));
        this.cityList = [];
        provinceIds.forEach((it) => {
          this.getCity({
            parentId: it,
          });
        });
      }
    },
    changeRuleCity(e) {
      this.areaList = [];
      this.addRuleList[0].ruleJson.cityId.forEach((it) => {
        this.getArea({
          parentId: it,
        });
      });
    },
    // confirmAddRules
    confirmAddRules() {
      if (
        this.ruleType != "RewardRuleTimesHitStrategy" &&
        (this.addRuleList[0].groupName == "" ||
          this.addRuleList[0].ruleJson.selectCount == "")
      ) {
        this.$message.error("请填写正确规则名称或者抽奖次数");
        return;
      }
      if (
        this.ruleType == "RewardRuleTimesHitStrategy" &&
        (this.addRuleList[0].cityId == "" ||
          this.addRuleList[0].areaId == "" ||
          this.addRuleList[0].thresholdCount == "")
      ) {
        this.$message.error("请填写正确规则名称或者抽奖次数和城市地区");
        return;
      }
      let ruleJson =
        this.ruleType == "RewardRuleTimesHitStrategy"
          ? {
              strategy: this.ruleType,
              thresholdCount: this.addRuleList[0].ruleJson.thresholdCount,
              cityId: this.addRuleList[0].ruleJson.cityId.join(","),
              areaId: this.addRuleList[0].ruleJson.areaId.join(","),
            }
          : {
              strategy: this.ruleType,
              smallDrawRewardCount:
                this.addRuleList[0].ruleJson.selectCount.split("_")[0],
              bigDrawRewardCount:
                this.addRuleList[0].ruleJson.selectCount.split("_")[1],
            };
      let params = {
        activityId: this.nowActivityId,
        groupName:
          this.ruleType == "RewardRuleTimesHitStrategy"
            ? this.addRuleList[0].ruleJson.thresholdCount + "次必中"
            : this.addRuleList[0].groupName,
        type: this.addRuleList[0].type,
        ruleJson: ruleJson,
        rewardList: this.addRuleList[0].rewardList,
      };
      // console.log('addRule', params);
      // return;
      addActivityRewardRule(params).then((res) => {
        if (res.code == 0) {
          this.$message.success("添加规则成功");
          this.cancelAddRule();
          this.getActivityDetailById();
        }
      });
    },
    cancelAddRule() {
      this.addRuleOpen = false;
      this.addRuleShow = false;
      this.ruleType = "RewardRuleFirstDrawStrategy";
    },
  },
};
</script>

<style scoped lang="scss">
.first-reward {
  min-height: 260px;
  background: #f9fafc;
  display: flex;
  .reward-left {
    width: 60%;
    height: 100px;
    .left-title {
      width: 220px;
      text-align: center;
      color: #b4b7be;
    }
    .reward-info {
      height: 40px;
      display: flex;

      p {
        width: 350px;
        text-align: center;
      }
      .input {
        width: 330px;
        margin-left: 10px;
      }
    }
  }
  .reward-right-number {
    display: flex;
    align-items: center;
    padding: 0 60px;

    .number-input {
      margin: 0 20px;
      width: 120px;
      p {
        color: #b4b7be;
      }
    }
  }
  .reward-right-time {
    display: flex;
    align-items: center;
    padding: 0 60px;
    p {
      color: #b4b7be;
    }
  }
  .reward-right {
    margin-left: 20px;
    width: 35%;
    p {
      color: #b4b7be;
    }
  }
}
@media screen and (max-width: 1154px) {
  .first-reward {
    min-height: 300px;
  }
}
@media screen and (max-width: 854px) {
  .first-reward {
    min-height: 400px;
  }
}
.setting-number {
  p {
    width: 120px;
  }
  .setting-input {
    width: 260px;
  }
  margin-top: 20px;
  display: flex;
  align-items: center;
}
</style>
